<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-01-05 16:33:29
 * @LastEditors: Your Name
 * @LastEditTime: 2023-02-05 11:54:50
 * @Description: file content
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="author" content="微普科技 http://www.wiipu.com" />
    <title>css 边框圆角属性操作</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            
        }

        .wrap {
            background: #efefef;
            height: 500px;
        }

        .opera {
            position: relative;
            width: 258px;
            height: 275px;
            background-color: #f22629;
            border-radius: 50%;
            margin: 0 auto;
        }

        .opera-top {
            left: 50%;
            top: 50%;
            margin-left: -56px;
            margin-top:-115px;
            border-radius: 50%;
            position: absolute;
            width: 112px;
            height: 230px;
            background-color: #efefef;
        }
    </style>
</head>

<body>
    <!--提示：使用css边框圆角属性实现opera浏览器logo，
外层椭圆宽258px、高275px、背景颜色#F22629，
内层椭圆宽112px、高度230px、背景颜色#ffffff-->
    <div class="wrap">
        <!--外层容器-->
        <div class="opera">
            <!--内层容器-->
            <div class="opera-top"></div>
        </div>
    </div>
</body>

</html>